<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>ECharts Liquid-fill Chart Tutorial </title>
<meta name="description" content="Liquid-fill is a type of charts that are suitable for displaying single percentage data. ECharts liquid-fill Chart provides fancy presentation of percentage data through single but power configurations. This post introduces how to use it.">
<meta name="keywords" content="extension, tutorial">



<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="ECharts Liquid-fill Chart Tutorial">
<meta property="og:description" content="Liquid-fill is a type of charts that are suitable for displaying single percentage data. ECharts liquid-fill Chart provides fancy presentation of percentage data through single but power configurations. This post introduces how to use it.">
<meta property="og:url" content="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html">
<meta property="og:site_name" content="">





<link rel="canonical" href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html">
<link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed">

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- For all browsers -->
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css">

<meta http-equiv="cleartype" content="on">

<!-- Load Modernizr -->
<script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>

<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png">

</head>

<body id="post" class="feature">

<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="http://echarts.baidu.com/index.html" class="navbar-brand">
                <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo">
            </a>
        </div>
        <div id="navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
                <li id="nav-doc" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
                        <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
                        <li><a href="http://echarts.baidu.com/api.html">API</a></li>
                        <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
                        <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
                        <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
                    </ul>
                </li>
                <li id="nav-download" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/download.html">下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
                    </ul>
                </li>
                <li id="nav-examples">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
                        <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
                    </ul>
                </li>
                <li id="nav-community" class="active">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
                        <li><a href="http://echarts.baidu.com/blog">博客</a></li>
                    </ul>
                </li>
                <li id="nav-tool">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
                        <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
                        <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
                    </ul>
                </li>
                <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li>
                <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
                <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
            </ul>
        </div>
    </div>
</nav>



<div class="entry-header">
  
  <div class="entry-image">
    <img src="http://echarts.baidu.com/blog/images/post/2017-02-21-echarts-liquidfill-chart-tutorial.gif" alt="ECharts Liquid-fill Chart Tutorial">
  </div><!-- /.entry-image -->
</div><!-- /.entry-header -->


<div id="post-main" role="main">
  <article class="hentry">
    <header class="header-title">
      <div class="header-title-wrap">
        <h1 class="entry-title">ECharts Liquid-fill Chart Tutorial</h1>
        <h2><span class="entry-date date published"><time datetime="2017-02-21T00:00:00+08:00">2017-02-21</time></span></h2>
        
      </div><!-- /.header-title-wrap -->
    </header>
    <div class="entry-content">
      <p>Liquid-fill is a type of charts that are suitable for displaying single percentage data. <a href="https://github.com/ecomfe/echarts-liquidfill">ECharts liquid-fill Chart</a> provides fancy presentation of percentage data through single but power configurations.</p>

<iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe>

<p>Now, let’s learn how to use it.</p>

<h2 id="step-1-including-javascript-files">Step 1: Including JavaScript Files</h2>

<p>ECharts liquid-fill chart is a <em>plugin</em> for ECharts, which means it is not included in the full version downloaded from official site. This ensures those who don’t need liquid-fill charts can have a smaller package size. When use it, you need to include <code class="highlighter-rouge">echarts-liquidfill.js</code> after <code class="highlighter-rouge">echarts.js</code>, the former of which can be downloaded at <a href="https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist">GitHub</a>.</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"echarts.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"echarts-liquidfill.js"</span><span class="nt">&gt;&lt;/script&gt;</span>

<span class="nt">&lt;script&gt;</span>
<span class="c1">// your code here</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre>
</div>

<h2 id="step-2-assign-dom-element-as-chart-container">Step 2: Assign DOM Element As Chart Container</h2>

<p>We need to assign a DOM element with width and height as chart container, just as we do with other chart types when using ECharts.</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"liquidfill-chart"</span> <span class="na">style=</span><span class="s">"width=100%; height = 400px"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre>
</div>

<p>Use the DOM element to init chart.</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">chart</span> <span class="o">=</span> <span class="nx">echarts</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'liquidfill-chart'</span><span class="p">));</span>
</code></pre>
</div>

<h2 id="step-3-configure-the-chart">Step 3: Configure The Chart</h2>

<p>We set the chart series <code class="highlighter-rouge">type</code> to be <code class="highlighter-rouge">'liquidFill'</code> to use it.</p>

<p>A simple configuration item may be:</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">]</span>
    <span class="p">}]</span>
<span class="p">};</span>
<span class="nx">chart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span>
</code></pre>
</div>

<p>Thus, we can get the liquid-fill chart at the beginning of this post.</p>

<iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe>

<blockquote>
  <p>If the chart doesn’t display as expected, you may check the following things:</p>

  <ul>
    <li>Whether JS files are loaded correctly;</li>
    <li>Whether <code class="highlighter-rouge">echarts</code> variable exists;</li>
    <li>Whether there are error messages in Console;</li>
    <li>Whether the DOM element has width and height when init.</li>
  </ul>
</blockquote>

<p>As you can see, we only assigned series type to be <code class="highlighter-rouge">'liquidFill'</code>, and set the data to be <code class="highlighter-rouge">[0.6, 0.5, 0.4, 0.3]</code>, which generate the four waves in the chart. Other parameters are all by default.</p>

<p>Even without much configuration, you may get an elegant liquid-fill chart with default parameters. And if you have specific demands, you may easily acheive them with our configuration. Here is how to customerize it.</p>

<h2 id="step-4-customerize-the-chart">Step 4: Customerize The Chart</h2>

<p>ECharts liquid-fill chart supports highly customizable configuration, including color, radius, amplitude, wave length, phase, period, wave direction, shape, wave animation and so on. Full configuration please refer to <a href="https://github.com/ecomfe/echarts-liquidfill#api">API</a>. Here, we are going to introduces some important parameters.</p>

<h3 id="shape-and-animation">Shape And Animation</h3>

<iframe style="width: 100%; height: 600px" src="http://gallery.echartsjs.com/view.html?cid=xry0tUfcBe"></iframe>

<p>Besides the default <code class="highlighter-rouge">'circle'</code> shape, it also supports symbols like <code class="highlighter-rouge">'rect'</code>, <code class="highlighter-rouge">'roundRect'</code>, <code class="highlighter-rouge">'triangle'</code>, <code class="highlighter-rouge">'diamond'</code>, <code class="highlighter-rouge">'pin'</code>, and <code class="highlighter-rouge">'arrow'</code>. Even more, you can set it to be an <a href="http://gallery.echartsjs.com/editor.html?c=liquidfill-echarts">SVG path</a> to get some fancy effect.</p>

<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts"></iframe>

<p>By setting <code class="highlighter-rouge">direction</code> to be <code class="highlighter-rouge">'left'</code> or <code class="highlighter-rouge">'right'</code>, we may assign the moving direction of the wave. Or, we can set it to be <code class="highlighter-rouge">'none'</code> for still.</p>

<p>Full configuration of the above is:</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="c1">// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe</span>
<span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span>
        <span class="na">shape</span><span class="p">:</span> <span class="s1">'diamond'</span><span class="p">,</span>
        <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'25%'</span><span class="p">,</span> <span class="s1">'25%'</span><span class="p">]</span>
    <span class="p">},</span> <span class="p">{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">direction</span><span class="p">:</span> <span class="s1">'left'</span><span class="p">,</span>
        <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span>
        <span class="na">shape</span><span class="p">:</span> <span class="s1">'rect'</span><span class="p">,</span>
        <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'75%'</span><span class="p">,</span> <span class="s1">'25%'</span><span class="p">]</span>
    <span class="p">},</span> <span class="p">{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span>
        <span class="na">shape</span><span class="p">:</span> <span class="s1">'roundRect'</span><span class="p">,</span>
        <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'25%'</span><span class="p">,</span> <span class="s1">'75%'</span><span class="p">],</span>
        <span class="na">backgroundStyle</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">borderColor</span><span class="p">:</span> <span class="s1">'#156ACF'</span><span class="p">,</span>
            <span class="na">borderWidth</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
            <span class="na">shadowColor</span><span class="p">:</span> <span class="s1">'rgba(0, 0, 0, 0.4)'</span><span class="p">,</span>
            <span class="na">shadowBlur</span><span class="p">:</span> <span class="mi">20</span>
        <span class="p">},</span>
        <span class="na">outline</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">show</span><span class="p">:</span> <span class="kc">false</span>
        <span class="p">},</span>
        <span class="na">waveAnimation</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// disable moving</span>
    <span class="p">},</span> <span class="p">{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">radius</span><span class="p">:</span> <span class="s1">'50%'</span><span class="p">,</span>
        <span class="na">shape</span><span class="p">:</span> <span class="s1">'pin'</span><span class="p">,</span>
        <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'75%'</span><span class="p">,</span> <span class="s1">'75%'</span><span class="p">],</span>
        <span class="na">amplitude</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="na">waveAnimation</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
        <span class="na">outline</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">show</span><span class="p">:</span> <span class="kc">false</span>
        <span class="p">},</span>
        <span class="na">backgroundStyle</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">shadowColor</span><span class="p">:</span> <span class="s1">'rgba(0, 0, 0, 0.4)'</span><span class="p">,</span>
            <span class="na">shadowBlur</span><span class="p">:</span> <span class="mi">20</span>
        <span class="p">}</span>
    <span class="p">}]</span>
<span class="p">};</span>
</code></pre>
</div>

<h3 id="configuration-for-a-single-wave">Configuration For A Single Wave</h3>

<p>Besides the configuration of the waves as introduced above, each single wave can have configuration to be overwritten.</p>

<iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xry6CHNCVl"></iframe>

<p>In this example, we set the second wave to be red, and changed its moving direction.</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="p">{</span>
            <span class="na">value</span><span class="p">:</span> <span class="mf">0.5</span><span class="p">,</span>
            <span class="na">direction</span><span class="p">:</span> <span class="s1">'left'</span><span class="p">,</span>
            <span class="na">itemStyle</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">normal</span><span class="p">:</span> <span class="p">{</span>
                    <span class="na">color</span><span class="p">:</span> <span class="s1">'red'</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">},</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">]</span>
    <span class="p">}]</span>
<span class="p">};</span>
</code></pre>
</div>

<p>You may notice that an item of the previous <code class="highlighter-rouge">data</code> is a number, but for those to be configured, they are an object containing <code class="highlighter-rouge">value</code>.</p>

<h2 id="label">Label</h2>

<p>Label of liquid-fill charts have a nice effect that the text colors before wave and background are different. <code class="highlighter-rouge">insideColor</code> can be used to set the text color before wave, and <code class="highlighter-rouge">color</code> can be used to set the color before background.</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">radius</span><span class="p">:</span> <span class="s1">'80%'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.45</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">label</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">normal</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span>
                    <span class="na">color</span><span class="p">:</span> <span class="s1">'red'</span><span class="p">,</span>
                    <span class="na">insideColor</span><span class="p">:</span> <span class="s1">'yellow'</span><span class="p">,</span>
                    <span class="na">fontSize</span><span class="p">:</span> <span class="mi">50</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}]</span>
<span class="p">};</span>
</code></pre>
</div>

<iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xHyUvV_tFe"></iframe>

<p>Label displays percentage data by default. If you want to set it otherwise, you may use <code class="highlighter-rouge">formatter</code> to do this. This is similar to other formatter of ECharts.</p>

<p><code class="highlighter-rouge">formatter</code> can be a string, in which <code class="highlighter-rouge">'{a}'</code>, <code class="highlighter-rouge">'{b}'</code>, <code class="highlighter-rouge">'{c}'</code> will be replaced to be series name, data name, and data value.</p>

<p>For example:</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">series</span><span class="p">:</span> <span class="p">[{</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span>
        <span class="na">name</span><span class="p">:</span> <span class="s1">'Liquid Fill'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="p">[{</span>
            <span class="na">name</span><span class="p">:</span> <span class="s1">'First Data'</span><span class="p">,</span>
            <span class="na">value</span><span class="p">:</span> <span class="mf">0.6</span>
        <span class="p">},</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span>
        <span class="na">label</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">normal</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">formatter</span><span class="p">:</span> <span class="s1">'{a}\n{b}\nValue: {c}'</span><span class="p">,</span>
                <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span>
                    <span class="na">fontSize</span><span class="p">:</span> <span class="mi">28</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}]</span>
<span class="p">};</span>
</code></pre>
</div>

<iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xHk5831cHg"></iframe>

<p>Besides, <code class="highlighter-rouge">formatter</code> can also be a function. The following code provides the same effect as before.</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">formatter</span><span class="err">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">param</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">param</span><span class="p">.</span><span class="nx">seriesName</span> <span class="o">+</span> <span class="s1">'\n'</span>
        <span class="o">+</span> <span class="nx">param</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'\n'</span>
        <span class="o">+</span> <span class="s1">'Value:'</span> <span class="o">+</span> <span class="nx">param</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>

<h2 id="conclusion">Conclusion</h2>

<p>In this post, we introduced how to use ECharts liquid-fill charts. Hopefully, you can be inspired by it and create more interesting works.</p>

<p>Full document please refer to <a href="https://github.com/ecomfe/echarts-liquidfill">GitHub</a>. And you may go to <a href="http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all">ECharts Gallery</a> to view more liquid-fill charts.</p>


      <div class="entry-meta">
        <span class="tag-panel">
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#extension" title="Pages tagged extension" class="tag">-->
            <span class="term">extension</span>
          <!--</a>-->
          
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#tutorial" title="Pages tagged tutorial" class="tag">-->
            <span class="term">tutorial</span>
          <!--</a>-->
          
          
        </span>
      </div>

      
    </div><!-- /.entry-content -->
    
    <div class="container">
  <div class="read-more">
    <h3>更多相关信息</h3>
    <div class="row">
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/03/23/new-release-en.html" title="ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released">ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released</a></h4>
          <p>We are releasing ECharts v3.5, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile ECharts statistic extension v1.0 is published.</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#extension" title="Pages tagged extension" class="tag">-->
              <span class="term">extension</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#tutorial" title="Pages tagged tutorial" class="tag">-->
              <span class="term">tutorial</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
      
      
      
      
      
      
      
      
    </div>
  </div>
</div>

  </article>
</div><!-- /#main -->

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div>
            <div id="efe-product" class="col-md-2 col-sm-4 pc">
                <h3>百度EFE更多产品</h3>
                <ul id="efe-product">
                    <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li>
                    <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li>
                    <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li>
                    <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li>
                    <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li>
                    <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-offset-1 col-sm-4 pc">
                <h3>友情链接</h3>
                <ul>
                    <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li>
                    <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li>
                    <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li>
                </ul>
            </div>
            <div class="col-md-3" id="footer-icon-panel">
                <div class="icon-panel">
                    <a href="mailto:echarts@baidu.com" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-email.png"/>
                    </a>
                    <a href="https://twitter.com/EChartsJs" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-twitter.png"/>
                    </a>
                    <a href="http://weibo.com/u/5160877841" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-weibo.png"/>
                    </a>
                    <a href="https://github.com/ecomfe/echarts" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-github.png"/>
                    </a>
                </div>
                <div id="echarts-copyright">&#9400; 2017 百度ECharts团队出品</div>
            </div>
        </div>
    </div>
</footer>


<script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script>
<script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>



</body>
</html>
